<template>
  <div class="login">
    <vue-particles
            color="#dedede"
            :particleOpacity="0.7"
            :particlesNumber="80"
            shapeType="circle"
            :particleSize="4"
            linesColor="#dedede"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="3"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
            style="width: 100%;height: 100%"
    ></vue-particles>
    <LoginDialog class="login_dialog"></LoginDialog>
  </div>
</template>

<script>
import LoginDialog from '../components/LoginDialog.vue'

export default {
  name: 'Home',
  components: {
    LoginDialog
  }
}
</script>

<style scoped lang="scss">
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../assets/img/demo-1-bg.jpg") no-repeat;
    background-size: 100% 100%;
  .login_dialog {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  }
</style>
